<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-button type="primary" @click="fetchData()">查询</el-button>
    </el-form>
    <el-card class="box-card" body-style="padding: 10px">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="openAddForm()">新增</el-button>
    </el-card>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="isdelete">
        <template slot-scope="scope">
          <span>{{ scope.row.isdelete }}</span>
        </template>
      </el-table-column>
      <el-table-column label="showorder">
        <template slot-scope="scope">
          <span>{{ scope.row.showorder }}</span>
        </template>
      </el-table-column>
      <el-table-column label="createTime">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="updateTime">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="name">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="productid">
        <template slot-scope="scope">
          <span>{{ scope.row.productid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="status">
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="beginTime">
        <template slot-scope="scope">
          <span>{{ scope.row.beginTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="endTime">
        <template slot-scope="scope">
          <span>{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="holder">
        <template slot-scope="scope">
          <span>{{ scope.row.holder }}</span>
        </template>
      </el-table-column>
      <el-table-column label="developBeginTime">
        <template slot-scope="scope">
          <span>{{ scope.row.developBeginTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="developEndTime">
        <template slot-scope="scope">
          <span>{{ scope.row.developEndTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="testBeginTime">
        <template slot-scope="scope">
          <span>{{ scope.row.testBeginTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="testEndTime">
        <template slot-scope="scope">
          <span>{{ scope.row.testEndTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="remark">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="participant">
        <template slot-scope="scope">
          <span>{{ scope.row.participant }}</span>
        </template>
      </el-table-column>
      <el-table-column label="relationDemandids">
        <template slot-scope="scope">
          <span>{{ scope.row.relationDemandids }}</span>
        </template>
      </el-table-column>
      <el-table-column label="tags">
        <template slot-scope="scope">
          <span>{{ scope.row.tags }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-finished" size="small" @click="openEditForm(scope.row)">查看</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small" @click="delById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="totalCount" :page-size="pageSize" @current-change="handleCurrentChange" />
    <!-- 表单 -->
    <el-dialog title="" :visible.sync="subDialogVisible" width="80%">
      <el-form label-position="left" label-width="80px" :model="editForm">
        
        <el-form-item v-show="false" label="id">
          <el-input v-model="editForm.id" />
        </el-form-item>
        <el-form-item label="isdelete">
          <el-input v-model="editForm.isdelete" />
        </el-form-item>
        <el-form-item label="showorder">
          <el-input v-model="editForm.showorder" />
        </el-form-item>
        <el-form-item label="createTime">
          <el-input v-model="editForm.createTime" />
        </el-form-item>
        <el-form-item label="updateTime">
          <el-input v-model="editForm.updateTime" />
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="productid">
          <el-input v-model="editForm.productid" />
        </el-form-item>
        <el-form-item label="status">
          <el-input v-model="editForm.status" />
        </el-form-item>
        <el-form-item label="beginTime">
          <el-input v-model="editForm.beginTime" />
        </el-form-item>
        <el-form-item label="endTime">
          <el-input v-model="editForm.endTime" />
        </el-form-item>
        <el-form-item label="holder">
          <el-input v-model="editForm.holder" />
        </el-form-item>
        <el-form-item label="developBeginTime">
          <el-input v-model="editForm.developBeginTime" />
        </el-form-item>
        <el-form-item label="developEndTime">
          <el-input v-model="editForm.developEndTime" />
        </el-form-item>
        <el-form-item label="testBeginTime">
          <el-input v-model="editForm.testBeginTime" />
        </el-form-item>
        <el-form-item label="testEndTime">
          <el-input v-model="editForm.testEndTime" />
        </el-form-item>
        <el-form-item label="remark">
          <el-input v-model="editForm.remark" />
        </el-form-item>
        <el-form-item label="participant">
          <el-input v-model="editForm.participant" />
        </el-form-item>
        <el-form-item label="relationDemandids">
          <el-input v-model="editForm.relationDemandids" />
        </el-form-item>
        <el-form-item label="tags">
          <el-input v-model="editForm.tags" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveForm">确认</el-button>
        <el-button type="button" @click="subDialogVisible=false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {  } from '@/api/xxx'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      subDialogVisible: false,
      editForm: {
        id: '',
        isdelete: '',
        showorder: '',
        createTime: '',
        updateTime: '',
        name: '',
        productid: '',
        status: '',
        beginTime: '',
        endTime: '',
        holder: '',
        developBeginTime: '',
        developEndTime: '',
        testBeginTime: '',
        testEndTime: '',
        remark: '',
        participant: '',
        relationDemandids: '',
        tags: '',

      },
      searchForm: {},
      totalCount: 0,
      currentPage: 1,
      pageSize: 20
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const formData = new FormData()
      formData.append('page', this.currentPage)
      formData.append('size', this.pageSize)
      /** 结果集为map */
      list(formData).then(response => {
        this.list = response.rows
        this.totalCount = response.total
        this.listLoading = false
      })
    },
    resetForm() {
      this.editForm = {
        id: '',
        isdelete: '',
        showorder: '',
        createTime: '',
        updateTime: '',
        name: '',
        productid: '',
        status: '',
        beginTime: '',
        endTime: '',
        holder: '',
        developBeginTime: '',
        developEndTime: '',
        testBeginTime: '',
        testEndTime: '',
        remark: '',
        participant: '',
        relationDemandids: '',
        tags: '',

      }
    },
    openAddForm() {
      resetForm()
      this.subDialogVisible = true
    },
    openEditForm(row) {
      resetForm()  
      this.editForm.id = row.id
      this.editForm.isdelete = row.isdelete
      this.editForm.showorder = row.showorder
      this.editForm.createTime = row.createTime
      this.editForm.updateTime = row.updateTime
      this.editForm.name = row.name
      this.editForm.productid = row.productid
      this.editForm.status = row.status
      this.editForm.beginTime = row.beginTime
      this.editForm.endTime = row.endTime
      this.editForm.holder = row.holder
      this.editForm.developBeginTime = row.developBeginTime
      this.editForm.developEndTime = row.developEndTime
      this.editForm.testBeginTime = row.testBeginTime
      this.editForm.testEndTime = row.testEndTime
      this.editForm.remark = row.remark
      this.editForm.participant = row.participant
      this.editForm.relationDemandids = row.relationDemandids
      this.editForm.tags = row.tags

      this.subDialogVisible = true
    },
    handleCurrentChange(p) {
      this.currentPage = p
      this.fetchData()
    },
    saveForm() {
      const formData = new FormData()
      formData.append('id', this.editForm.id)
      formData.append('isdelete', this.editForm.isdelete)
      formData.append('showorder', this.editForm.showorder)
      formData.append('createTime', this.editForm.createTime)
      formData.append('updateTime', this.editForm.updateTime)
      formData.append('name', this.editForm.name)
      formData.append('productid', this.editForm.productid)
      formData.append('status', this.editForm.status)
      formData.append('beginTime', this.editForm.beginTime)
      formData.append('endTime', this.editForm.endTime)
      formData.append('holder', this.editForm.holder)
      formData.append('developBeginTime', this.editForm.developBeginTime)
      formData.append('developEndTime', this.editForm.developEndTime)
      formData.append('testBeginTime', this.editForm.testBeginTime)
      formData.append('testEndTime', this.editForm.testEndTime)
      formData.append('remark', this.editForm.remark)
      formData.append('participant', this.editForm.participant)
      formData.append('relationDemandids', this.editForm.relationDemandids)
      formData.append('tags', this.editForm.tags)

      /** 结果为ResultDto */
      save(formData).then(response => {
        // console.log(response)
        this.subDialogVisible = false
        this.fetchData()
      })
    },
    delById(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(response => {
          if (response.code === 'SUCCESS') {
            this.subDialogVisible = false
            this.fetchData()
          } else {
            this.$message({
              type: 'danger',
              message: response.msg
            })
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'danger',
        //   message: '程序异常'
        // })
      })
    }
  }
}
</script>
<style lang="scss">
  .el-dialog-div {
    height: 60vh;
    overflow-x: hidden;
  }
</style>
